<template>
	<view class="ticket-line-shop">
	  <!-- 顶部搜索栏 -->
	   <view style="background: #ffffff;padding: 20rpx">
		 <u-search
			 v-model="keyword"
			 placeholder="请输入搜索内容"
			 @search="onSearch"
			 :show-action="false"
			 bg-color="#f5f5f5"
		 />
	   </view>
	  <view style="background: #ffffff">
		<u-dropdown active-color="#f56c6c">
		  <u-dropdown-item v-model="searchParams.sort" :title="getSortTitle" :options="sortOptions"></u-dropdown-item>
		</u-dropdown>
	  </view>
	  <!-- 列表区 -->
	  <scroller-view
		:list="list"
		:finished="finished"
		@load="loadMore"
		class="ticket-line-list"
	  >
		<view
		  v-for="item in list"
		  :key="item.id"
		  class="ticket-line-item"
		  @click="goDetail(item.id)"
		>
		  <image :src="item.post_url" class="ticket-line-img" mode="aspectFill" />
		  <view class="ticket-line-info">
			<view class="ticket-line-top">
			  <view class="ticket-line-title">
				<text v-for="(tag, idx) in item.tags" class="tag tag-hot">{{ tag }}</text>
				<text class="main-title">{{ item.title }}</text>
			  </view>
			  <view class="ticket-line-tags">
				<template v-for="(tag, idx) in item.tags2">
				  <text class="tag tag-hot-border">{{ tag }}</text>
				</template>
			  </view>
			  <view class="ticket-line-date-sale">
				<text class="ticket-line-date">
          团期：{{ item.dates || '' }}</text>
			  </view>
			</view>
			<view class="ticket-line-bottom">
        <text class="ticket-line-sale">{{ item.saleText || '0人出游' }}</text>
			  <text class="ticket-line-price">
				￥{{ item.price }}<text class="price-tip">起</text>
			  </text>
			</view>
		  </view>
		</view>
	  </scroller-view>
	</view>
  </template>
  <script>
  export default {
	name: "shop",
	data() {
	  return {
      keyword: "",
		searchParams: {
		  sort: '',
		  lineType: '',
		  filter: ''
		},
		sortOptions: [
		  { label: "综合排序", value: "" },
      { label: "价格从低到高", value: "price,desc" },
      { label: "价格从高到低", value: "price,asc" },
      { label: "销量从高到低", value: "sale_count,desc" },
      { label: "销量从低到高", value: "sale_count,asc" },
		],
		list: [],
		pageNo: 1,
		pageSize: 10,
		finished: false,
		loading: false
	  };
	},
	computed: {
	  getSortTitle() {
		if (this.searchParams.sort) {
		  let option = this.sortOptions.find(item => item.value === this.searchParams.sort) || { label: "综合排序" }
		  return option.label
		}
		return "综合排序"
	  }
	},
	onLoad() {
	  this.getList(true);
	  // 可在此处请求分类
	},
	methods: {
	  onSearch() {
		this.pageNo = 1;
		this.getList(true);
	  },
	  loadMore() {
		if (!this.finished && !this.loading) {
		  this.pageNo++;
		  this.getList();
		}
	  },
	  getList(reset = false) {
		this.loading = true;
      uni.showLoading({
        title: '加载中'
      })
		this.$api.getProductList({
		  ...this.searchParams,
      type: 2
		}).then(res => {
      let data = res
      this.list = [];
      this.list = this.list.concat(data.map(item => {
			let key = 'sale_count'
			if (item.virtual_sale_count) {
			  key = 'virtual_sale_count'
			}
			return {
			  ...item,
        tags: Array.isArray(item.tags) ? item.tags : (item.tags ? item.tags.split(',') : []),
        tags2: Array.isArray(item.tags2) ? item.tags2 : (item.tags2 ? item.tags2.split(',') : []),
        saleText: (item[key] > 10000 ? (item[key] / 10000).toFixed(1) + '万+' : item[key] || 0) + '人出游',
			  price: item.price || 0,
			}
		  }));
		  this.finished = data.length < this.pageSize;
		})
	  },
	  goDetail(id) {
		uni.navigateTo({
		  url: '/pages/ticket/lineDetail?lineId=' + id
		});
	  }
	}
  };
  </script>

  <style lang="scss">
  page {
	height: 100%;
	overflow: hidden;
  }
  .ticket-line-shop {
	background: #f5f5f5;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	.u-dropdown__menu__item {
	  flex: initial !important;
	  width: 30%;
	}
  }
  .ticket-line-list {
	flex-grow: 1;
	margin-top: 20rpx;
  }
  .ticket-line-item {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	margin: 20rpx 20rpx 0 20rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  }
  .ticket-line-img {
	flex-shrink: 0;
	width: 200rpx;
	height: 200rpx;
	border-radius: 16rpx;
	object-fit: cover;
	margin-right: 20rpx;
  }
  .ticket-line-info {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
  }
  .ticket-line-title {
	margin-bottom: 8rpx;
	.main-title {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #222;
	  line-height: 1.3;
	  min-width: 120rpx;
	}
  }
  .ticket-line-level {
	font-size: 22rpx;
	color: #6c8cff;
	margin-left: 10rpx;
	font-weight: bold;
  }
  .ticket-line-desc {
	color: #6c8cff;
	font-size: 28rpx;
	margin: 16rpx 0;
  }
  .ticket-line-address {
	color: #999;
	font-size: 24rpx;
	display: flex;
  }
  .ticket-line-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 8rpx;
  }
  .ticket-line-sale {
	color: #999;
	font-size: 22rpx;
  }
  .ticket-line-price {
	color: #f56c6c;
	font-size: 32rpx;
	font-weight: bold;
  }
  .old-price {
	color: #bbb;
	font-size: 24rpx;
	text-decoration: line-through;
	margin-right: 8rpx;
  }
  .price-tip {
	font-size: 20rpx;
	color: #f56c6c;
  }
  .tag {
    display: inline-block;
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
    font-size: 22rpx;
    margin-right: 10rpx;
    vertical-align: middle;
  }
  .tag-orange {
	background: #ffb74d;
	color: #fff;
  }
  .tag-hot {
	background: #ff7043;
	color: #fff;
  }
  .tag-border {
	border: 1rpx solid #e0e0e0;
	color: #666;
	background: #fff;
	margin-right: 8rpx;
  }
  .tag-hot-border {
	border: 1rpx solid #f56c6c;
	color: #f56c6c;
	background: #fff;
	margin-right: 8rpx;
  }
  .ticket-line-subtitle {
	color: #333;
	font-size: 28rpx;
	margin: 8rpx 0 0 0;
  }
  .ticket-line-tags {
	margin: 8rpx 0;
  }
  .ticket-line-date-sale {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 8rpx 0;
  }
  .ticket-line-date {
	color: #1abc9c;
	font-size: 24rpx;
  }
  </style>
